<template>
		<vk-data-dialog
			v-model="value.show"
			:title="page.title"
			top="2vh"
			center
			width="1200px"
			:close-on-click-modal="true"
			@open="onOpen"
			@closed="onClose"
		>
		<view class="page-body" v-loading="loading">

			<!-- 页面主体内容开始 -->
			<vk-data-form
				ref="form1"
				v-model="form1"
				:rules="formData1.rules"
				:action="formData1.action"
				:form-type="value.mode"
				:columns='formData1.columns'
				label-width="80px"
				:loading.sync="formData1.loading"
				@success="onFormSuccess">
				<!-- 商品名称 -->
				<template slot="name" slot-scope="{ form, keyName, val }">
					<view class="goods_name">
						<text>{{val}}</text>
					</view>
				</template>
				<!-- 规格字段 -->
				<template slot="spec_list" slot-scope="{ form, keyName, val }">
					<view class="spec_list" :style="'width:'+(160*(titleArr.length)+20)+'px'">
						<view class="spec_list_header">
							<text v-for="(title,index) of titleArr" :key="index">{{title}}</text>
						</view>
						<view class="spec_list_body" v-for="(item1,index1) of form.sku_list" :key="'sku-'+index1">
							<text v-for="(item2,index2) of val" :key="'val-'+index2"
								v-if="item2.name">{{item1.sku_name_arr[index2]}}</text>
							<text>{{item1.price | priceFilter}}</text>
							<view v-for="(item3,index3) of item1.vip_price_rules" :key="'vip-'+item3._id" class="discount_price" >
								<vk-data-input-money v-if="form.is_fixed_calc"
									v-model="item3.fixed_value" right-text="元" :clearable="false"></vk-data-input-money>
								<vk-data-input-discount v-else
									v-model="item3.proportion_value" :clearable="false"></vk-data-input-discount>
							</view>
						</view>
					</view>
				</template>

				<template slot="footer" slot-scope="{ loading }">
					<el-button :loading="loading" type="primary" style="width: 80px;" @click="submitForm">{{ page.submitText }}</el-button>
					<el-button plain style="margin-left: 20px;width: 80px;" @click="pageBack">关闭</el-button>
				</template>

			</vk-data-form>
			<!-- 页面主体内容结束 -->
		</view>
		</vk-data-dialog>
</template>

<script>
	var that;													// 当前页面对象
	var vk = uni.vk;									// vk实例
	var originalForms = {};						// 表单初始化数据
	export default {
		props: {
			value:{
				Type:Object,
				default: function() {
					return {
						show:false,
						mode:"",
						item:""
					}
				}
			}
		},
		data: function() {
			// 组件创建时,进行数据初始化
			return {
				loading:false,
				page:{
					title:"设置会员价",
					submitText:"设置"
				},
				titleArr:[],
				form1:{
					name:"",
					is_fixed_calc: false,
					spec_list:[]
				},
				formData1:{
					// 表单请求地址
					action:"admin/business/sys.goods.updateVipMoney",
					// 表单字段显示规则
					columns:[
						// 常用字段类型
						{ key:"name", title:"商品名称:", type:"text" },
						{ key:"is_fixed_calc", title:"优惠方式:", type:"radio",
							data:[
								{ value:false, label:"打折" },
								{ value:true, label:"指定价格" }
							]
						},
						{ key: "spec_list", title: "", type: "table", minWidth: 200, maxHeight:600}
					],
					// 表单验证规则
					rules:{

					},
				}
			};
		},
		mounted() {
			that = this;
			that.init();
		},
		methods: {
			// 初始化
			init(){
				originalForms["form1"] = vk.pubfn.copyObject(that.form1);

			},
			// 页面打开
			onOpen(){
				that = this;
				let { value, form1, vk } = that;
				let item = vk.pubfn.copyObject(value.item);
				form1.spec_list = item.spec_list;
				form1.name = item.name;
				// sku列表
				form1.sku_list = item.sku_list;
				if(vk.pubfn.isNotNull(item.sku_list[0].vip_price_rules)){
					form1.is_fixed_calc = item.sku_list[0].vip_price_rules[0].is_fixed_calc;
				};
				that.initVipPriceRulesList();
			},
			// 初始化会员价列表规则
			initVipPriceRulesList(){
				// 已经存在优惠方式了
				let sku_list = that.form1.sku_list;
				that.loading = true;
				vk.callFunction({
					url: 'client/pub.getMchInfo',
					data:{},
					success:function(data){
						let list = vk.pubfn.getData(data,"mchInfo.vip_level_rule");
						list.map((vip,vipIndex)=>{
							let addKey = false;
							let vip_id = vip.lv;

							sku_list.map((sku,skuIndex)=>{
								if(vk.pubfn.isNotNull(sku.vip_price_rules)){
									let ruleItem = vk.pubfn.getListItem(sku.vip_price_rules,"_id",vip_id);
									if(vk.pubfn.isNull(ruleItem)){
										addKey = true;
									}
								}else{
									sku.vip_price_rules = [];
									addKey = true;
								}
								if(addKey){
									sku.vip_price_rules.push({
										"_id": vip_id,
										"is_fixed_calc": true,
										"fixed_value": "",
										"proportion_value": ""
									});
								}
							});
						});
						let titleArr = [];
						that.form1.spec_list.map((spec,specIndex)=>{
							titleArr.push(spec.name);
						});

						titleArr.push("商城价格");
						list.map((vip,vipIndex)=>{
							titleArr.push(vip.name);
						});
						that.titleArr = titleArr;
						that.loading = false;
					}
				});
			},
			// 页面关闭
			onClose(){
				that.resetForm();
			},
			// 页面返回
			pageBack(){
				let { value } = that;
				value.show = false;
				that.$emit('input', value);
			},
			// 表单重置
			resetForm(){
				vk.pubfn.resetForm(originalForms, that);
			},
			// 表单提交
			submitForm(){
				// 是否提交
				let notSubmit = false;
				let { sku_list,is_fixed_calc } = that.form1;
				that.form1.rules_list = sku_list.reduce((pre,skuItem,skuIndex)=>{
					skuItem.vip_price_rules.map((vipPriceItem,vipPriceIndex)=>{
						if(vipPriceItem.proportion_value === 0 && vipPriceItem.fixed_value === 0){
							notSubmit = true;
						};
						vipPriceItem.is_fixed_calc = is_fixed_calc;
					});
					pre.push({
						_id: skuItem._id,
						vip_price_rules: skuItem.vip_price_rules,
					});
					return pre;
				},[]);
				// 是否提交
				if(notSubmit){
					this.$message.error(`会员价不能为0折`);
					return false;
				};
				that.$refs.form1.submitForm();
			},
			// 提交成功后
			onFormSuccess(){
				// 返回页面
				that.$emit('success');
				that.pageBack();
			},
		},
		watch: {

		},
		// 过滤器
		filters: {
			is_priceFilter(value){
				if(typeof value === 'number'){
					return priceFilter(value);
				};
				return value;
			},
		},
		// 计算属性
		computed: {

		}
	};
</script>

<style lang="scss" scoped>
	view,text{
		box-sizing: border-box;
	}
	.goods_name{

	}
	.spec_list_header{
		background-color: #f5f7fa;
	}
	.spec_list_header,
	.spec_list_body{
		display: grid;
		grid-template-columns: repeat(auto-fill, 160px);
		border: 1px solid #f5f7fa;
		>text{
			width: 100%;
			height: 100%;
			border-right: 1px solid #f5f7fa;
			padding-left: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		// 输入框
		.discount_price{
			place-self: center;
			border-radius: 4px;
			width: 90%;
			height: 70%;
		}
	}

	.spec_list_body{
		border-top: none;
		overflow: auto;
		grid-template-rows: repeat(auto-fill, 50px);
		transition: all .3s;
		&:hover{
			background-color: #f5f7fa;
		}
	}

</style>
